<template>
  <f7-page>
    <f7-navbar title="提现" back-link="返回"></f7-navbar>
    <form class="list inline-labels no-hairlines-md">
      <ul>
        <li>
          <label class="item-content item-checkbox item-input">
            <input value="1" name="my-checkbox" type="checkbox" v-model="account">
            <i class="icon icon-checkbox"></i>
            <div class="item-inner">
              <img round src="../../assets/img/icon.png" class="icon" />
              <div class="item-title item-label">提现到支付宝账户</div>
              <div class="item-input-wrap">
                <input type="text" placeholder="请输入" v-model="account" class="text-align-right">
              </div>
            </div>
          </label>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">真实姓名</div>
              <div class="item-input-wrap">
                <input type="text" placeholder="请输入" v-model="name" class="text-align-right">
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">提现金额</div>
              <div class="item-input-wrap">
                <input type="number" placeholder="请输入" v-model="price" class="text-align-right" @click="moneyChange()">
              </div>
            </div>
          </div>
        </li>
      </ul>
      <f7-block>
        <f7-button big fill @click="confirm()"> 确认提现</f7-button>
      </f7-block>
    </form>
    <f7-popup class="name-popup" :opened="popupOpened" @popup:closed="popupOpened = false">
      <f7-page>
        <f7-navbar :title="popupData.title">
          <f7-nav-right>
            <f7-link popup-close class="close">关闭</f7-link>
          </f7-nav-right>
        </f7-navbar>
        <div v-if="popupData.type === 'success'">
          <f7-block class="text-align-center">
            <h1 class="gap-50">支付宝提现成功</h1>
            <h1 class="bold">￥ {{successMoney}}</h1>
          </f7-block>
          <div class="gap-50 text-align-center">
            <f7-button class="button-full" round block popup-close>
              完成
            </f7-button>
          </div>
        </div>
        <div v-if="popupData.type === 'error'">
          <f7-block class="text-align-center">
            <h3 class="gap-50">{{errorMsg}}</h3>
          </f7-block>
          <div class="gap-50 text-align-center">
            <f7-button class="button-full" round block popup-close>
              我知道了
            </f7-button>
          </div>
        </div>
      </f7-page>
    </f7-popup>
  </f7-page>
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      account: '',
      name: '',
      price: '',
      status: false,
      msg: '',
      popupData: {},
      popupOpened: false,
      errorMsg: '',
      successMoney: ''
    }
  },
  methods: {
    open (title, type) {
      this.popupData.title = title
      this.popupData.type = type
      this.popupOpened = true
    },
    validata () {
      if (!this.account) {
        this.status = false
        this.msg = '请填写支付宝账号'
      } else if (!this.name) {
        this.status = false
        this.msg = '请填写真实姓名'
      } else if (!this.price) {
        this.status = false
        this.msg = '请填写提现金额'
      } else if (this.price > 20000) {
        this.status = false
        this.msg = '单笔提现金额不得超过20000'
      } else {
        this.status = true
      }
      return { status: this.status, msg: this.msg }
    },
    moneyChange () {
      if (this.price && this.price.toString().indexOf('.') != -1) {
        let ws = this.price.toString().split(".")[1].length;
        if (ws > 2) {
          this.price = Math.floor(this.price * 100) / 100
        } else { }
      }
    },
    async confirm () {
      let withdraw = this.validata()
      if (withdraw.status) {
        let param = {
          amount: this.price,
          pay_method: 'Alipay',
          pay_surplus: 'withdeawals',
          payee_account: this.account,
          payee_real_name: this.name,
          packageName: 'com.rsc.business'
        }
        let confirmRep = await this.LineService.payPriceCarry(param)
        if (confirmRep.data.status === 'success') {
          console.log('提现成功', confirmRep.data.status)
          this.open('提现成功', 'success')
          this.successMoney = this.price
        } else {
          console.error('提现失败', confirmRep.data.status)
          this.open('提现失败', 'error')
          this.errorMsg = confirmRep.data.msg
        }
      } else {
        this.toast(withdraw.msg)
        return false
      }
    },
  }
}
</script>

<style scoped>
.ios .list {
  margin: 15px 0 0 0;
}
.ios .inline-labels .item-label {
  font-size: 14px;
}
.ios .list input[type='text'] {
  font-size: 14px;
}
.ios .button.button-fill {
  background: #db4226;
  font-size: 15px;
}
.icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 5px;
  display: inline-block;
}
.ios a.close {
  font-size: 14px;
  color: #fff;
}
.ios .button.button-full {
  background: #db4226;
  color: #fff;
  font-size: 16px;
  display: block;
  height: 44px;
  line-height: 44px;
  margin: 0 70px;
  border-color: #db4226;
}
</style>
